<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单展示页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/font-awesome.css" />
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <!-- 控制用户是否登录 -->
<!--    <script src="js/loginStatus.js"></script>-->
    <style>
        .navbar-text a  {
            color: #ffffff;
        }
        .login-text {
            margin-right: 50px;
        }
        .table tr:first-child {
            background-color: #e2e2e2;
            font-weight: 600;
        }
        .tab-content {
            padding-top: 24px;
        }
        .toPay{
            position: relative;
            left: 450px;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default navbar-inverse navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="前端首页.html" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i> 寻欢易购</a>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-xs-8 col-xs-push-2">
                <ul class="nav nav-tabs" id="orderTabs">
                    <li class="active"><a id="0" href="#unpayOrders">未支付订单</a></li>
                    <li><a id="1" href="#payedOrders">已支付订单</a></li>
                    <li><a id="2" href="#expiredOrders">已取消订单</a></li>
                </ul>
                <div class="tab-content" id="app">
                    <div id="unpayOrders"  class="tab-pane active">
                        <table class="table" v-for="o in unpayOrders">
                            <tbody v-if="expiredOrders == 1">
                            <tr><td><h1>暂无数据</h1></td></tr>
                            </tbody>
                            <tbody v-else>
                                <tr >
                                    <td colspan="3">订单日期: {{o.createTime}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号:{{o.orderNo}}  </td>
                                </tr>
    <!--                                <tr v-for="g in goods">-->
                                <tr v-for="v in o.orders">
                                    <td style="max-width: 200px;">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="javascript: void(0);">
                                                    <img class="media-object" height="80px" width="62px" :src="v.goodsImg">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">{{v.goodsTitle}}</h4>
                                            </div>
                                        </div>
                                    </td>
                                    <td>￥{{v.goodPrice}}</td>
                                    <td>{{v.goodNum}}</td>
                                </tr>
                            </tbody>
                            <br>
                            <tbody v-if="expiredOrders != 1"><tr> <td style="background: #FFFFFF"> <button onclick="cancelOrder(this)" :id="o.orderNo" class="btn btn-danger btn-lg toPay">删除订单</button><button onclick="toPayOrder(this)" :id="o.orderNo" class="btn btn-success btn-lg toPay">去支付</button></td></tr></tbody>
                        </table>



                    </div>

                    <div id="payedOrders" class="tab-pane">
                        <table class="table" v-for="o in payedOrders">
                            <tbody v-if="expiredOrders == 1">
                            <tr><td><h1>暂无数据</h1></td></tr>
                            </tbody>
                            <tbody v-else>
                                <tr>
                                    <td colspan="3">订单日期: {{o.createTime}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号:{{o.orderNo}}</td>
                                </tr>

                                <!--                                <tr v-for="g in goods">-->
                                <tr v-for="v in o.orders">
                                    <td style="max-width: 200px;">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="javascript: void(0);">
                                                    <img class="media-object" height="80px" width="62px" :src="v.goodsImg">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">{{v.goodsTitle}}</h4>
                                            </div>
                                        </div>
                                    </td>
                                    <td>￥{{v.goodPrice}}</td>
                                    <td>{{v.goodNum}}</td>
                                </tr>

                                </tbody>
                                <tbody v-if="expiredOrders != 1"><tr> <td style="background: #FFFFFF"> <button style="left: 570px" onclick="cancelOrder(this)" :id="o.orderNo" class="btn btn-danger btn-lg toPay">删除订单</button></td></tr></tbody>
                            </table>
                    </div>
                    <div id="expiredOrders" class="tab-pane">
                        <table class="table" v-for="o in expiredOrders">
                            <tbody v-if="expiredOrders == 1">
                                <tr><td><h1>暂无数据</h1></td></tr>
                            </tbody>
                            <tbody v-else>
                                <tr >
                                    <td colspan="3">订单日期: {{o.createTime}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号:{{o.orderNo}}</td>
                                </tr>
                                <!--                                <tr v-for="g in goods">-->
                                <tr v-for="v in o.orders">
                                    <td style="max-width: 200px;">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="javascript: void(0);">
                                                    <img class="media-object" height="80px" width="62px" :src="v.goodsImg">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">{{v.goodsTitle}}</h4>
                                            </div>
                                        </div>
                                    </td>
                                    <td>￥{{v.goodPrice}}</td>
                                    <td>{{v.goodNum}}</td>
                                </tr>
                            </tbody>
                            <tbody v-if="expiredOrders != 1"><tr> <td style="background: #FFFFFF"> <button style="left: 570px" onclick="cancelOrder(this)" :id="o.orderNo" class="btn btn-danger btn-lg toPay">删除订单</button></td></tr></tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
<script>

    function cancelOrder(btnTag){
        $.ajax({
            url: 'http://localhost:8080/java_project_war_exploded/order',
            data:{
                orderNo: btnTag.id,method:'cancelOrder'
            },
            dataType: 'json',
            success:function (_data) {

                getOrderInfo();
            }
        })
    }

    //点击去支付将商品编号存进localStorge里面
     function toPayOrder(btnTag){
         localStorage.setItem('local_shopping_orderNo',btnTag.id);
         location.href='http://localhost:8080/java_project_war_exploded/pay.jsp';
     }

    // document.getElementById('payedOrders').innerHTML = document.getElementById('unpayOrders').innerHTML
    var order = new Vue({
        el:'#app',
        data:{
            unpayOrders:[],
            payedOrders:[],
            expiredOrders:[]
        }
    })

    $('#orderTabs a').click(function() {
        if($(this).parent('.active').length == 0) { //如果找到的话，就表示当前标签处于未激活状态
            var status = $(this).prop('id');  //取到当前的tab的id, 与订单的状态是一致的
            $(this).tab('show');
        }
    })

    function getOrderInfo(){
        order.unpayOrders=[];
        order.payedOrders=[];
        order.expiredOrders=[];
        var id = $('.active a').attr('id');
        // console.log(id)
        $.ajax({
            url: 'http://localhost:8080/java_project_war_exploded/order',
            dataType: 'json',
            data: {
                status: id, method: 'getOrderOfStatus'
            },
            type: 'GET',
            success: function (_data) {
                //返回的数据为空时，统一赋值为1
                if (_data.length == 0){
                    order.unpayOrders= 1;
                    order.payedOrders= 1;
                    order.expiredOrders= 1;
                }
                //根据a标签的id给对应的Vue数据赋值
                for (var i = 0; i < _data.length; i++) {
                    if (id == 0){
                        order.unpayOrders.push(_data[i]);
                    }else if(id == 1){
                        order.payedOrders.push(_data[i]);
                    }else if (id == 2){
                        order.expiredOrders.push(_data[i]);
                    }
                }

            }
        });
    }
    getOrderInfo();

    $('li').click(function(){
        getOrderInfo()
    });

</script>
</html>